<!-- 头部 -->
<template>
  <div id="antiknock-header">
    <div class="center-left">
      <div class=" display-flex ai-center jc-space-evenly">
        <div class="center-left-r display-flex ai-center">
          <div class="center-left-r-timing u-m-r-4">{{ timing }}</div>
          <div class="center-left-r-day display-flex fd-column">
            <span >{{ date }}</span>
            <span class="u-m-t-2 two">{{ day }}</span>
          </div>
        </div>
      </div>
      <p class="schoolname">{{dataVal.school_name}}</p>
    </div>
    <div class="center-title">智慧校园数据中心</div>
    <!-- 智慧校园数据中心 -->
    
    <div class="center-right display-flex ai-center jc-flex-end">
      <div class="center-right-l display-flex ai-center" v-if="dataVal.weatherInfo">
        <div class="center-right-l-wether u-p-r-15">天气：{{ dataVal.weatherInfo.weather }}</div>
        <div class="center-right-l-city  u-p-r-15">温度：{{ dataVal.weatherInfo.temperature }}</div>
        <div class="center-right-l-city  u-p-r-15">风向：{{ dataVal.weatherInfo.winddirection }}</div>
        <div class="center-right-l-temp">空气湿度{{ dataVal.weatherInfo.humidity }}</div>
        
      </div>
      <div class="center-right-r display-flex ai-center">
        <el-button class="mr-30" type="text" @click="onFullScreen"
          ><img
            style="width: 40px; height: 40px"
            :src="fullscreen ? efs : fs"
            alt=""
            srcset=""
        /></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import fs from "@/assets/img/full-screen.png";
import efs from "@/assets/img/exit-full-screen.png";
import screenfull from "screenfull";
export default {
  name: "antiknock-header",
  components: {},
  props:{
    dataVal:{
      type:Object,
      default:()=>{
        // eslint-disable-next-line vue/require-valid-default-prop
        return {}
      }
    }
  },
  data() {
    return {
      fs,
      efs,
      date: moment().format("YYYY/MM/DD"),
      timing: moment().format("HH:mm:ss"),
      time: moment().format("YYYY/MM/DD HH:mm:ss"),
      fullscreen: true,
      isShow: false,
      dataWeather: {
        city: "西安",
        dayweather: "晴",
        nightweather: "多云",
        weathertemp: "39", // 根据时间判断选白天还是晚上的天气
        nighttemp: "20",
        daytemp: "11",
        peraturetemp: "22", // 根据时间判断选白天还是晚上的温度
        icontemp: "33",
      },
    };
  },
  computed: {
    day() {
      const day = Number(moment(this.time).format("e"));
      switch (day) {
        case 0:
          return "星期日";
        case 1:
          return "星期一";
        case 2:
          return "星期二";
        case 3:
          return "星期三";
        case 4:
          return "星期四";
        case 5:
          return "星期五";
        case 6:
          return "星期六";
        default:
          return "星期";
      }
    },
  },
  async mounted() {
    try {
      this.timer = setInterval(() => {
        this.time = moment().format("YYYY/MM/DD HH:mm:ss");
        this.date = moment().format("YYYY/MM/DD");
        this.timing = moment().format("HH:mm:ss");
      }, 1000);
      const element = document.documentElement; // 设置后就是我们平时的整个页面全屏效果
      if (document.webkitIsFullScreen && element.requestFullscreen()) {
        try {
          const res = await element.requestFullscreen();
          console.log("res", res);
        } catch (err) {
          console.log("err", err);
        }
        console.log('1111111')
      } else if (element.webkitRequestFullScreen) {
        console.log('2222')
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        console.log('3333')
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        console.log('444')
        // IE11
        element.msRequestFullscreen();
      }
      // 解决按f11时图标不变化的问题
      window.addEventListener("keydown", this.KeyDown, true); // 监听按键事件

    } catch (err) {
      console.log("err", err);
    }
    // this.requestGetWeather();
  },
  methods: {
    KeyDown(event) {
      if (event.keyCode === 122) {
        // 禁用f11
        event.returnValue = false;
        // 触发全屏的按钮
        this.onFullScreen();
      }
    },
    //
    onFullScreen() {
      if (!screenfull.isEnabled) {
        this.$message.warning("您的浏览器不支持全屏，请更换浏览器再试~");
        return false;
      }
      screenfull.toggle();
      screenfull.onchange(() => {
        this.fullscreen = screenfull.isFullscreen;
      });
    },
    // 监听是否全屏状态
    onresize() {
      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
      const winFlag = window.innerHeight === window.screen.height;
      // 利用window全屏标识来判断 -- IE无效
      const isFull = window.fullScreen || document.webkitIsFullScreen;

      if (isFull === undefined) {
        this.fullscreen = winFlag;
      } else {
        this.fullscreen = winFlag || isFull;
      }
    },
    
    
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss">
#antiknock-header {
  position: relative;
  width: 100%;
  height: 80px;
  // line-height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  // padding: 0px 30px;
  // border: 1px solid red;
  background: url("~@/assets/img/header-bg1.png");
  background-size: 100% 200%;
  .center-left {
    width: 600px;
    height: 40px;
    position: absolute;
    top: 25px;
    // border: 1px solid red;
    .center-left-l {
      height: 40px;
      padding: 0px 30px 0px 0px;
      border-right: 1px solid #68d8fd;
      img {
        height: 40px;
      }
    }
    .center-left-r {
      height: 40px;
      margin-left: 20px;
      .center-left-r-timing {
        height: 70px;
        line-height: 70px;
        font-size: 28px;
        font-weight: bold;
        color: #75F9FD;
      }
      .center-left-r-day {
        font-size: 12px;
        color: #DAF4EF;
        padding: 10px;
        span.two{
          color: #B6E9E0;
        }
      }
    }
  }
  .center-title {
    position: absolute;
    left: 50%;
    top: 0px;
    height: 80px;
    line-height: 80px;
    transform: translateX(-50%);
    font-size: 35px;
    font-weight: bold;
    // background-image: linear-gradient(to top, #1183d6, #52ebf5, #1183d6);
    // -webkit-background-clip: text;
    // color: transparent;
    color: #fff;
  }
  .center-right {
    position: absolute;
    top: 25px;
    right: 0px;
    width: 600px;
    height: 40px;
    .center-right-l {
      // width: 100%;
      height: 60px;
      margin-right: 20px;
       font-size: 14px;
       color: #75F9FD;
      .center-right-l-city {
        padding: 10px;
      }
      .center-right-l-temp {
      }
      .center-right-l-weather {
        
      }
    }
    .center-right-r {
      height: 40px;
      padding: 0px 0px 0px 30px;
      border-left: 1px solid #68d8fd;
    }
  }
}
.schoolname{
  color: #75F9FD;
  font-size: 22px;
  font-weight: bold;
  margin-left: 40px;
  // margin-top: -20px;
}
</style>
